<template>
	<view class="water-card-container">
		<view class="card-section">
			<view class="card">
				<view class="card-header">
					<text class="title">电子水卡</text>
					<text class="card-no">卡号：{{cardNo}}</text>
				</view>
				<view class="card-content">
					<view class="qr-code">
						<image :src="qrCode" mode="aspectFit"></image>
					</view>
					<view class="info">
						<text>供水区域：{{area}}</text>
						<text>用户名：{{username}}</text>
						<text>绑定时间：{{bindTime}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="usage-guide">
			<u-cell-group title="使用说明">
				<u-cell title="扫码用水" label="在自助取水点扫描二维码即可取水"></u-cell>
				<u-cell title="余额查询" label="可实时查看水量余额"></u-cell>
				<u-cell title="安全保障" label="电子水卡与账号绑定，安全可靠"></u-cell>
			</u-cell-group>
		</view>

		<view class="notice">
			<u-notice-bar
				:text="noticeText"
				mode="horizontal"
				:duration="8000"
			></u-notice-bar>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cardNo: 'WC20250219001',
			qrCode: '/static/qr-placeholder.png', // 这里需要替换为实际的二维码图片
			area: '南山区科技园供水点',
			username: '张三',
			bindTime: '2025-02-19',
			noticeText: '温馨提示：请妥善保管您的电子水卡，不要将二维码分享给他人。如有疑问，请联系客服。'
		}
	},
	onLoad() {
		// 获取用户水卡信息
		this.fetchWaterCardInfo()
	},
	methods: {
		fetchWaterCardInfo() {
			// TODO: 从后端获取水卡信息
		}
	}
}
</script>

<style lang="scss" scoped>
.water-card-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 30rpx;

	.card-section {
		margin-bottom: 40rpx;

		.card {
			background: linear-gradient(135deg, #1296db, #6bc6ff);
			border-radius: 20rpx;
			padding: 40rpx;
			color: #fff;
			box-shadow: 0 4rpx 20rpx rgba(18, 150, 219, 0.2);

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}

				.card-no {
					font-size: 24rpx;
					opacity: 0.8;
				}
			}

			.card-content {
				display: flex;
				align-items: center;

				.qr-code {
					width: 200rpx;
					height: 200rpx;
					background-color: #fff;
					padding: 20rpx;
					border-radius: 12rpx;
					margin-right: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					flex: 1;
					display: flex;
					flex-direction: column;
					gap: 20rpx;

					text {
						font-size: 28rpx;
					}
				}
			}
		}
	}

	.usage-guide {
		margin-bottom: 40rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}

	.notice {
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
	}
}
</style>
